<!--
 * @Descripttion: 菜单的新增和编辑
 * @version:
 * @Author: wl
 * @Date: 2020-05-25 11:30:38
 * @LastEditors: wl
 * @LastEditTime: 2020-08-20 19:34:57
-->
<template>
  <div>
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      label-width="80px"
      style="text-align:left;"
    >
      <el-form-item label="菜单类型" prop="type">
        <el-radio-group v-model="dataForm.type">
          <el-radio v-for="(type, index) in menuTypeList" :label="index" :key="index">{{ type }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="menuTypeList[dataForm.type] + '名称'" prop="name">
        <el-input v-model="dataForm.name" :placeholder="menuTypeList[dataForm.type] + '名称'"></el-input>
      </el-form-item>
      <el-form-item label="上级菜单" prop="parentName">
        <popup-tree-input
          :data="popupTreeData"
          :props="popupTreeProps"
          :prop="dataForm.parentName == null || dataForm.parentName == '' ? '顶级菜单' : dataForm.parentName"
          :nodeKey="'' + dataForm.parentId"
          :currentChangeHandle="handleTreeSelectChange"
        ></popup-tree-input>
      </el-form-item>
      <el-form-item v-if="dataForm.type !== 0" label="授权标识" prop="perms">
        <el-input
          v-model="dataForm.perms"
          placeholder="如: sys:user:add, sys:user:edit, sys:user:delete"
        ></el-input>
      </el-form-item>
      <el-form-item v-if="dataForm.type === 1" label="菜单路由" prop="url">
        <el-row>
          <el-col :span="22">
            <el-input v-model="dataForm.url" placeholder="菜单路由"></el-input>
          </el-col>
          <el-col :span="2" class="icon-list__tips">
            <el-tooltip placement="top" effect="light" style="padding: 10px;">
              <div slot="content">
                <p>URL格式：</p>
                <p>1.常规业务开发的功能URL，如用户管理，Views目录下页面路径为 /Sys/User, 此处填写 /sys/user。</p>
                <p>2.嵌套外部网页，如通过菜单打开百度网页，此处填写 http://www.baidu.com，http:// 不可省略。</p>
                <p>示例：用户管理：/sys/user 嵌套百度：http://www.baidu.com 嵌套网页：http://127.0.0.1:8000</p>
              </div>
              <i class="el-icon-warning"></i>
            </el-tooltip>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item v-if="dataForm.type !== 2" label="排序编号" prop="orderNum">
        <el-input-number
          v-model="dataForm.orderNum"
          controls-position="right"
          :min="0"
          label="排序编号"
        ></el-input-number>
      </el-form-item>
      <el-form-item v-if="dataForm.type !== 2" label="菜单图标" prop="icon">
        <el-row>
          <el-col :span="22">
            <!-- <el-popover
                ref="iconListPopover"
                placement="bottom-start"
                trigger="click"
                popper-class="mod-menu__icon-popover">
                <div class="mod-menu__icon-list">
                  <el-button
                    v-for="(item, index) in dataForm.iconList"
                    :key="index"
                    @click="iconActiveHandle(item)"
                    :class="{ 'is-active': item === dataForm.icon }">
                    <icon-svg :name="item"></icon-svg>
                  </el-button>
                </div>
            </el-popover>-->
            <el-input
              v-model="dataForm.icon"
              v-popover:iconListPopover
              :readonly="false"
              placeholder="菜单图标名称（如：fa fa-home fa-lg）"
              class="icon-list__input"
            ></el-input>
          </el-col>
          <el-col :span="2" class="icon-list__tips">
            <fa-icon-tooltip />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">提交</el-button>
<!--        <el-button @click="resetForm()">重置</el-button>-->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import PopupTreeInput from '@/components/PopupTreeInput';
import FaIconTooltip from '@/components/FaIconTooltip';
export default {
  components: {
    PopupTreeInput,
    FaIconTooltip
  },
  props: {
    dataForm: {
      type: Object,
      default: function() {
        return {
          id: 0,
          type: 1,
          name: '',
          parentId: 0,
          parentName: '',
          url: '',
          perms: '',
          orderNum: 0,
          icon: '',
          iconList: [],
          show: ''
        };
      }
    }
  },
  data() {
    return {
      loading: false,
      editLoading: false,
      dataForm: {
        id: 0,
        type: 1,
        name: '',
        parentId: 0,
        parentName: '',
        url: '',
        perms: '',
        orderNum: 0,
        icon: '',
        iconList: [],
        show: ''
      },
      houseList: [{ ID: 1, name: '展示端 ' }, { ID: 2, name: ' 大数据分析 ' }, { ID: 3, name: '警务实战' }],
      menuTypeList: ['目录', '菜单', '按钮'],
      popupTreeData: [],
      popupTreeProps: {
        label: 'name',
        children: 'children'
      },
      dataRule: {
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
      }
    };
  },
  methods: {
    // 菜单树选中
    handleTreeSelectChange(data, node) {
      this.dataForm.parentId = data.id;
      this.dataForm.parentName = data.name;
    },
    findTreeData() {
      this.loading = true;
      let params = {
        where: {
          bool: true,
          show: true
        }
      };
      let param = JSON.stringify(params);

      this.$api.menu.findMenuTree(param).then(res => {
        this.tableTreeDdata = res.data;
        this.popupTreeData = this.getParentMenuTree(res.data);
        this.loading = false;
      });
    },
    //切换类型
    changeType() {
      console.log(this.dataForm.show);
    },
    // 获取上级菜单树
    getParentMenuTree: function(tableTreeDdata) {
      let parent = {
        parentId: 0,
        name: '顶级菜单',
        children: tableTreeDdata
      };
      return [parent];
    },
    // 表单提交
    submitForm() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.editLoading = true;
            let params = Object.assign({}, this.dataForm);

            let paramm = {
              tbn: 'authority_menu',
              isIndex_num: true,
              rows: params,
              where: { id: this.dataForm.id }
            };
            var aaa = JSON.stringify(paramm);

            this.$api.menu.save(aaa).then(res => {
              this.editLoading = false;
              if (res.code == 0) {
                this.$message({ message: '操作成功', type: 'success' });
                this.$emit('handleSave');
                this.handleClose();
                // this.$refs["dataForm"].resetFields();
                // this.dialogVisible = false;
              } else {
                this.$message({
                  message: '操作失败, ' + res.msg,
                  type: 'error'
                });
              }
              this.findTreeData();
            });
          });
        }
      });
    },
    handleClose() {
      this.$emit('closeEdit');
    }
  },
  mounted() {
    this.findTreeData();
    console.log(this.dataForm);
  }
};
</script>

<style>
</style>
